<div class="rights_box">
  <!-- 面包屑 -->
  <el-row>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
  </el-row>

  <!-- 选择菜单 -->
  <el-row class="select_box">
    <el-cascader
    v-model="cateChecked"
    :options="cateList"
    :props="{ expandTrigger: 'hover', value: 'cat_id', label: 'cat_name' }"></el-cascader>
  </el-row>
  

  <!-- 选项卡 -->
  <el-row>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="动态参数" name="first">
        <el-row>
          <el-button @click="() => this.addParamsInfoDialog = true" type="success">添加参数分类</el-button>
        </el-row>
        <el-row>
          <el-table
            :data="randerParamsInfoList"
            border
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="data">
                <el-tag
                  @close="deleteParamsInfoHandler(data.row.attr_vals, item, data.row.attr_name, data.row.attr_id)"
                  style="float: left;"
                  :key="item"
                  v-for="item in data.row.attr_vals"
                  closable
                  :disable-transitions="false">
                  {{item}}
                </el-tag>
                <el-col :span="2">
                  <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="addParamsInfo"
                    @keydown.enter.native="addParamsInfoHandler(data.row)"
                    ref="saveTagInput"
                    size="small">
                  </el-input>
                  <el-button 
                    v-else class="button-new-tag" 
                    size="small" 
                    @click="showAddTagHandler">
                    + New Tag
                  </el-button>
                </el-col>
              </template>
            </el-table-column>
            <el-table-column
              label="序号"
              width="70"
              type="index">
            </el-table-column>
            <el-table-column
              label="商品名称"
              prop="attr_name">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="data">
                <el-tooltip class="item" content="编辑" effect="dark" placement="left">
                  <el-button circle size="mini" type="success" icon="el-icon-edit" @click="editParamsInfoHandler(data.row.attr_id, data.row.attr_name)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" content="删除" effect="dark" placement="top">
                  <el-button circle size="mini" type="danger" icon="el-icon-delete" @click=deleatParamsHandler(data.row.attr_id)></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="静态参数" name="second">
        <el-row>
          <el-button @click="() => this.addParamsInfoDialog = true" type="success">添加参数分类</el-button>
        </el-row>
        <el-row>
          <el-table
            :data="randerParamsInfoList"
            border
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="data">
                <el-tag
                  @close="deleteParamsInfoHandler(data.row.attr_vals, item, data.row.attr_name, data.row.attr_id)"
                  style="float: left;"
                  :key="item"
                  v-for="item in data.row.attr_vals"
                  closable
                  :disable-transitions="false">
                  {{item}}
                </el-tag>
                <el-col :span="2">
                  <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="addParamsInfo"
                    @keydown.enter.native="addParamsInfoHandler(data.row)"
                    ref="saveTagInput"
                    size="small">
                  </el-input>
                  <el-button 
                    v-else class="button-new-tag" 
                    size="small" 
                    @click="showAddTagHandler">
                    + New Tag
                  </el-button>
                </el-col>
              </template>
            </el-table-column>
            <el-table-column
              label="序号"
              width="70"
              type="index">
            </el-table-column>
            <el-table-column
              label="商品名称"
              prop="attr_name">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="data">
                <el-tooltip class="item" content="编辑" effect="dark" placement="left">
                  <el-button circle size="mini" type="success" icon="el-icon-edit" @click="editParamsInfoHandler(data.row.attr_id, data.row.attr_name)"></el-button>
                </el-tooltip>
                <el-tooltip class="item" content="删除" effect="dark" placement="top">
                  <el-button circle size="mini" type="danger" icon="el-icon-delete" @click=deleatParamsHandler(data.row.attr_id)></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-row>

  <!-- 添加动态参数名称信息弹出框 -->
  <el-dialog title="添加动态参数名称" :visible.sync="addParamsInfoDialog" @close="closeaddParamsInfoDialog">
    <el-form :model="addParamsNameinfo" :rules="addParamsRules" ref="addParams">
      <el-form-item prop="name" label="参数名称">
        <el-input autocomplete="off" v-model="addParamsNameinfo.name"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="() => this.addParamsInfoDialog = false">取 消</el-button>
      <el-button type="success" @click="addParamsHandler">确 定</el-button>
    </div>
  </el-dialog>

  <!-- 编辑动态参数名称信息弹出框 -->
  <el-dialog title="添加动态参数名称" :visible.sync="editParamsInfoDialog">
    <el-form :model="editParamsNameinfo" :rules="addParamsRules" ref="addParams">
      <el-form-item prop="name" label="参数名称">
        <el-input autocomplete="off" v-model="editParamsNameinfo.name"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="() => this.editParamsInfoDialog = false">取 消</el-button>
      <el-button type="success" @click="editParamsHandler">确 定</el-button>
    </div>
  </el-dialog>
</div>
